<template>
	<view class="wrap">
		<view class="header">
			<view class="userinfo">
				<view class="image" @click="navTo('info')">
					<image :src="avatar"></image>
					<u-avatar size="100" v-show='false' src="https://i.niupic.com/images/2022/01/04/9SQz.jpg"></u-avatar>
				</view>
				<view class="info" style="display: flex;justify-content: space-between;">
					<view>
						<view class="username">张三</view>
						<view class="usercode">普通用户</view>
					</view>
					<view class="sign-in-images">
						<image src=""></image>
					</view>
				</view>
			</view>
			<u-row class="userinfo-topbox" gutter="16" justify="center">
				<u-col span="4" text-align="center">
					<view class="number">9,999<em></em></view>
					<view>羊只</view>
				</u-col>
				<u-col span="4" text-align="center" @click="navTo('/pages/sys/application/recharge')">
					<view>
						<u-icon size="28px" color="#ffffff" name=""></u-icon>
					</view>
					<view>XX</view>
				</u-col>
				<u-col span="4" text-align="center" @click="navTo('/pages/sys/application/balance-details')">
					<view>
						<view class="iconfont icon-faan" style="font-size: 24px;color:#ffffff;"></view>
					</view>
					<view>其他</view>
				</u-col>
			</u-row>
		</view>
		<view class="list">
			<view>
				<u-cell-group class="personal-list">
					<u-gap height="20" bg-color="#f5f5f5"></u-gap>
					<u-cell-item icon="question-circle" :iconStyle="{ color: '#ff8d06' }" title="常见问题"
						@click="navTo('problem')"></u-cell-item>
					<u-cell-item icon="kefu-ermai" :iconStyle="{ color: '#5f8dff' }" title="意见反馈"
						@click="navTo('comment')"></u-cell-item>
					<u-cell-item icon="map" :iconStyle="{ color: '#316ede' }" title="账号安全" @click="navTo('pwd')">
					</u-cell-item>
					<u-cell-item icon="account" :iconStyle="{ color: '#27c0dc' }" title="关于我们" @click="navTo('about')">
					</u-cell-item>
					<u-cell-item icon="kefu-ermai" :iconStyle="{ color: '#ff8a00' }" title="联系客服"
						@click="navTo('service')"></u-cell-item>
					<u-gap height="20" bg-color="#f5f5f5"></u-gap>
					<u-cell-item icon="setting" :iconStyle="{ color: '#2767dc' }" title="系统设置"
						@click="navTo('setting')"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>
<script>

	export default {
		data() {
			return {
				iconSize: 38,
				avatar: 'https://i.niupic.com/images/2022/01/04/9SQz.jpg'
			};
		},
		computed: {
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			logout() {
				this.$u.api.logout().then(res => {
					this.$u.toast(res.msg);
					if (res.code == '200' || res.code == '401') {
						let self = this;
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/sys/login/index'
							});
						}, 500);
					}
				});
			},
			upgrade() {
				// #ifdef APP-PLUS
				this.$u.api.upgradeCheck().then(res => {
					if (res.result == 'true') {
						uni.showModal({
							title: '提示',
							content: res.message + '是否下载更新？',
							showCancel: true,
							success: function(res2) {
								if (res2.confirm) {
									plus.runtime.openURL(res.data.apkUrl);
								}
							}
						});
					} else {
						this.$u.toast(res.message);
					}
				});
				// #endif
				// #ifndef APP-PLUS
				this.$u.toast('小程序端或H5端无需检查更新')
				// #endif
			}
		}
	};
</script>
<style lang="scss" scoped>
	.header {
		background-color: $uni-color-main;
		.userinfo {
			display: flex;
			padding: 0rpx 30rpx 10rpx;
			.image {
				flex-shrink: 0;
				width: 100rpx;
				height: 100rpx;

				image {
					border-radius: 100%;
					width: 100%;
					height: 100%;
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30rpx;
				color: #fff;

				.username {
					width: 100%;
					font-size: 40rpx;
				}

				.usercode {
					height: 36rpx;
					padding: 0 20rpx;
					margin-top: 10rpx;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20rpx;
					font-size: 20rpx;
				}
			}
		}

		.logout {
			flex-shrink: 0;
			position: absolute;
			right: 70rpx;
			top: 65rpx;

			.u-btn {
				font-size: 30rpx;
			}
		}
	}

	.toolbar {
		padding: 0 4%;
		margin-bottom: 5rpx;
		border-radius: 0 0 100% 100%;
		background-color: #4094ff;

		.box {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			padding: 10rpx;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
			background-color: #fefefe;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// flex-flow: wrap;
				height: 120rpx;
				color: #666666;
				font-size: 30rpx;
				padding: 10rpx 10rpx;

				.icon {
					font-size: 50rpx;
				}

				.label {
					padding: 10rpx;
				}
			}

			.hover {
				background-color: #f6f6f6;
				border-radius: 15rpx;
			}
		}
	}

	.uni-input-input {
		border: 1px solid red;
	}

	.userinfo-topbox {
		padding: 10px 15px;
		color: #ffffff;

		.number {
			font-size: 20px;

			em {
				font-style: normal;
				font-size: 12px;
			}
		}
	}

	.user-order-top {
		padding: 10px 15px;
		background: #ffffff;
	}

	.user-order-box {
		padding: 10px 15px;
		background: #ffffff;
		border-bottom: 1px solid #ededed;
	
	.u-col {
			position: relative;
		}

		.u-badge {
			top: -8px !important;
			right: 5px !important;
			background: #ff7001;
			border: 1px solid #ffffff;
			box-sizing: content-box;
		}
	}
	.list{
		overflow: hidden;
	}

	page {
		background-color: #f5f5f5;
	}

	.wrap .u-cell-box .u-cell_title {
		color: #202328;
	}

	.sign-in-images {
		width: 125rpx;
		height: 50rpx;
		position: absolute;
		right: 0;
		top: 5px;

		uni-image {
			width: 125rpx;
			height: 50rpx;
		}
	}
</style>
